<template>
  <div :class="{'editor': !readonly}" class="table-input-number" @mouseenter="editVisible = true" @mouseleave.stop="editVisible = false">
    <input ref="tableInputNumber" type="number" :value="value" @input="input" :readonly="readonly" @blur="handleInputBlur"/>
    <a-icon type="edit" v-if="editor" v-show="editVisible" @click.stop="editorClick"/>
  </div>
</template>

<script>
import { 
  updateRow
} from "@/api/worksheet";
export default {
	props: {
		value: {
			default: 0
		},
		editor: {
			default: true
		},
    rowId: String,
    fieldName: String
	},
	data(){
		return{
			editVisible: false,
			readonly: true,
		}
	},
	methods:{
		input(event){  
			this.$emit('input',event.target.value);
		},
    editorClick(){
        this.readonly = false
        this.$refs.tableInputNumber.focus()
    },
    async handleInputBlur(){
        if(!this.editor)return
        this.readonly = true
        await updateRow({worksheetId: this.worksheetId, data: {[this.fieldName]: this.value}, rowId: this.rowId})
    }
	},
    computed:{
      worksheetId() {
          return this.$route.params.worksheetId;
      }
    }
}

</script>

<style lang="less">
.appPage{
  .table-input-number{
      padding: 0 10px;
      display: flex;
      align-items: center;
      input{
        color: #606266 !important;
        background-color: transparent;
        border: none !important;
        text-align: right;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
          -webkit-appearance: none !important;
      }

      i{
        cursor: pointer;
        margin-left: 2%;
        width: 5%;
        color: #606266;
      }
      i:hover{
        color: #0f8df2;
      }
  }
  .editor{
      border: 2px #0f8df2 solid;
      background-color: white;
      input{
        text-align: left;
      }
  }
}
</style>